<template>
	<view class="tabs">
		<u-sticky>
			<u-tabs :list="tabList" lineWidth="50" @change="tabChange" :current="current" :scrollable="false"
				lineColor="#FF4110"
				:activeStyle="{ color: '#FF4110', fontWeight: 'bold', transform: 'scale(1.05)' }"></u-tabs>
		</u-sticky>
	</view>
	<view class="container w94">
		<!-- 		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :auto="false" :down="{
				auto: false
			}" bottom="150" :up="{
				textNoMore: '没有更多了'
			}"> -->
		<scroll-view scroll-y style="height: 85vh;padding-top: 20rpx;" @scrolltolower="loadMore">
			<view class="listNull" v-if="orderList.length == 0">
				<img src="@/static/images/listNull.png" alt="" />
				<text>暂无订单</text>
			</view>
			<view class="item mt10" v-if="true" @click="$u.throttle(toOrderDetail, 500)">
				<view class="header flex-between">
					<text>2024-10-11 10:19:45</text>
					<text class="status" v-if="current==0">待配送</text>
					<text class="status" v-else-if="current==1">待收货</text>
					<!-- <text class="status" v-else-if="current==2">退货中</text> -->
					<text class="status" v-else-if="current==2">待评价</text>
				</view>
				<view class="body flex-between">
					<view class="left flex">
						<view class="img-box">
							<u-image width="72" height="72" radius="8" src="@/static/images/jiayouzhan.png"></u-image>
						</view>
						<view class="description">
							<view class="one">重庆市渝中区加油站</view>
							<view class="two">#92</view>
						</view>
					</view>
					<view class="right">
						<view class="amount flex-center">
							<view class="symbol">￥</view>
							<view>3000</view>
							<view class="decimal">.00</view>
						</view>
						<view class="num">约30升</view>
					</view>
				</view>

				<!-- 		<view class="tips flex-between">
					<text>
						<text class="tit">待付款</text>
						<text class="subT">请在10-11 11:19:45前完成支付!</text>
					</text>
					<text class="iconfont custom-icon custom-icon-youjiantou"
						style="font-size: 12px; color: #999"></text>
				</view> -->

				<view class="btns" v-if="current==0">
					<!-- <view class="btn flex-center" @click="$u.throttle(goPayment, 500)">申请开票</view> -->
					<!-- <view class="btn flex-center primary" @click.stop="$u.throttle(toCashier, 500)">立即支付</view>	 -->
				</view>
				<view class="btns" v-else-if="current==1">
					<view class="btn flex-center" @click="$u.throttle(confirm, 500)">确认收货</view>
				</view>
				<view class="btns" v-else-if="current==2">
					<view class="btn flex-center " @click.stop="$u.throttle(evaRider('111',true), 500)">评价送货员</view>
					<view class="btn flex-center primary"
						@click="$u.throttle(evaOil('3f4b148ba4e1425d8632d60bcd075e60'), 500)">
						评价油站</view>
				</view>
			</view>
			<view v-else>
				<view class="centre">
					<image src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode=""></image>
					<view class="explain">
						您还没有相关的订单
						<view class="tips">可以去看看有那些想买的</view>
					</view>
					<view class="btn">随便逛逛</view>
				</view>
			</view>
			<!-- </mescroll-body> -->
			<!-- 加载状态 -->
			<u-loadmore :status="loadingState" icon-type="circle" />
		</scroll-view>

		<!-- 分页控件 -->
		<u-pagination v-model="page" :page-count="pageCount" :total="pageTotal" mode="button" @change="pageChange" />
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed
	} from 'vue';
	import API from '@/api/index.js';
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom,
		onShareAppMessage
	} from '@dcloudio/uni-app';
	import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';

	let page = ref(1)
	let pageSize = ref(10)
	let pageTotal = ref(10)
	let loading = ref(false)
	let loadingState = ref('loadmore')
	let condition = reactive([{
		"filedIndex": "uid",
		"filedValue": uni.getStorageSync('userInfo').id
	}, {
		"filedIndex": "type",
		"filedValue": "0"
	}])

	// 计算总页数
	const pageCount = computed(() => {
		return Math.ceil(pageTotal.value / pageSize.value)
	})

	onLoad((options) => {
		current.value = options?.status || 0;
		condition[1] = {
			"filedIndex": "type",
			"filedValue": options?.status
		}
		getData(1)
	});
	const tabList = ref([
		// {
		// 	name: '待付款'
		// },
		{
			name: '待配送'
		},
		{
			name: '待收货'
		},
		// {
		// 	name: '退货',
		// 	count: 12
		// },
		{
			name: '待评价'
		}
	]);
	//当前的tab
	const current = ref(0);
	//点击tab事件
	const tabChange = (item) => {
		current.value = item.index;
		condition[1] = {
			"filedIndex": "type",
			"filedValue": JSON.stringify(item.index)
		}
		getData()
		// getMescroll().resetUpScroll();
	};
	// 确认收货
	const confirm = () => {
		uni.showModal({
			title: '提示',
			content: '确定已收到货？点击后不可退货',
			success(res) {
				if (res.confirm) {
					uni.showToast({
						title: "收货成功！",
						icon: "none"
					})
				}
			}
		})
	}
	// 跳转到申请开票界面
	const goPayment = () => {
		uni.navigateTo({
			url: '/pages/goods/payment/index'
		})
	}
	// 页码变化
	const pageChange = (page) => {
		page.value = page
		console.log("页码变化了", page.value);
		getData(page.value)
	}
	// 加载更多（滚动到底部）
	const loadMore = () => {
		console.log("滚动到底了");
		console.log(page.value, pageCount.value);
		if (page.value < pageCount.value) {
			page.value++
			setTimeout(() => {
				getData(page.value)
			}, 1000)
		}
	}
	// 去评价油站
	const evaOil = async (id) => {
		// 获取当前油站标签统计
		let res = await API.getCount(id)
		// 跳转到对应油站评价页面
		uni.navigateTo({
			url: '/pages/gas_station_mall/gas_station_evaluate/index?sid=' + id + '&list=' + JSON
				.stringify(res.data) + '&isEva=true'
		})
	}
	// 去评价骑手
	const evaRider = (id, isEva) => {
		// 跳转到对应骑手评价页面
		uni.navigateTo({
			url: '/pages/gas_station_mall/gas_station_evaluate/rider?id=' + id + '&isEva=' + isEva
		})
	}
	/* 订单数据 */
	const orderList = reactive([]);

	// 获取列表数据
	const getData = async (index) => {
		// 处理中condition中为null的数据
		const conditionArray = condition.filter(item => item !== null);

		try {
			loadingState.value = 'loading'
			let res = await API.OrderList({
				"pageIndex": index,
				"pageSize": pageSize.value,
				"condition": conditionArray
			})
			console.log("getData res", res.data.list, index);
			if (index == 1) {
				orderList.length = 0
				Object.assign(orderList, res.data.list)
			} else {
				orderList.push(...res.data.list)
			}
			pageTotal.value = res.data.total
			page.value = res.data.currentPage
			loadingState.value = orderList.length >= pageTotal.value ? 'nomore' : 'loadmore'
		} catch (e) {
			loadingState.value = 'error'
		}

		// page.value = res.data.currentPage
	}

	const toOrderDetail = () => {
		if (current.value == 0 || current.value == 1) {
			uni.navigateTo({
				url: '/pages/goods/order_detail/index'
			});
		}
	};

	const toCashier = () => {
		uni.navigateTo({
			url: '/pages/goods/cashier/index'
		});
	};
</script>

<style lang="scss">
	.listNull {
		display: flex;
		flex-direction: column;
		text-align: center;
		margin: 0 auto;

		image {
			width: 200rpx;
			height: 200rpx;
			// margin: 10% 0 10% 10%;
			margin: 20rpx auto;
		}

		text {
			color: #919ea9;
		}
	}

	.tabs {
		background: #fff;
	}

	.item {
		padding: 34rpx 24rpx;
		background: #fff;
		border-radius: 12px;

		.header {
			font-size: 14px;

			.status {
				font-size: 13px;
				color: #e93323;
			}
		}

		.body {
			margin-top: 26rpx;

			.left {
				.img-box {
					width: 72px;
					height: 72px;
					border-radius: 8px;
				}

				.description {
					margin-left: 20rpx;

					.one {
						width: 346rpx;
						color: #333;
						line-height: 40rpx;
						font-size: 14px;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}

					.two {
						margin-top: 12rpx;
						width: 346rpx;
						color: #999;
						line-height: 36rpx;
						font-size: 12px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.right {
				.amount {
					color: #e93323;
					font-family: SemiBold;
					font-weight: 500;
					font-weight: 600;

					.symbol {
						font-size: 10px;
					}

					.decimal {
						font-size: 10px;
					}
				}

				.num {
					color: #999;
					text-align: right;
					line-height: 18px;
					font-size: 24rpx;
					font-family: 'PingFang SC';
				}
			}
		}

		.tips {
			padding: 0 20rpx;
			margin-top: 26rpx;
			height: 72rpx;
			border-radius: 8rpx;
			background-color: #f5f5f5;
			align-items: center;

			.tit {
				font-size: 13px;
				color: #333;
			}

			.subT {
				font-size: 13px;
				padding-left: 20rpx;
				color: #999;
			}
		}

		.btns {
			margin-top: 34rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.btn {
				border: 1px solid #ccc;
				width: 76px;
				height: 29px;
				font-size: 12px;
				border-radius: 16px;
				background-color: #fff;
				margin-left: 20rpx;
			}

			.primary {
				color: #fff;
				background-color: #ff4110;
				border: 1px solid #ff4110;
			}
		}
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(90deg, rgb(233, 51, 35) 0%, rgb(255, 121, 49) 100%);
		}
	}
</style>